<template>
  <view class="lifestyle-improvement-plan">
    <!-- 标题区域 -->
    <view class="plan-header">
      <view class="header-content">
        <text class="title-text">生活方式与习惯改善计划</text>
        <text class="subtitle-text">科学指导 · 健康生活</text>
      </view>
      <view class="header-decoration">
        <view class="decoration-circle"></view>
        <view class="decoration-circle"></view>
      </view>
    </view>

    <!-- 改善计划内容 -->
    <view class="plan-content">
      <!-- 饮食改善 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🍽️</view>
          <text class="category-title">饮食</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 饮食习惯 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">饮食习惯</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in dietHabits"
              :key="`diet-habit-${index}`"
              :model-value="item"
              @update:model-value="(data) => updateDietHabit(index, data)"
              :show-title="true"
              title-label="改善项目"
              title-placeholder="请输入改善项目"
              description-label="改善建议"
              description-placeholder="请输入具体的改善建议"
              :description-rows="3"
              border-color="border-blue-300"
              :show-images="true"
              image-label="参考图片"
            />
          </view>

          <!-- 偏好食物 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">偏好食物</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in preferredFoods"
              :key="`preferred-food-${index}`"
              :model-value="item"
              @update:model-value="(data) => updatePreferredFood(index, data)"
              :show-title="true"
              title-label="食物类型"
              title-placeholder="请输入食物类型"
              description-label="营养建议"
              description-placeholder="请输入营养搭配建议"
              :description-rows="3"
              border-color="border-green-300"
              :show-images="true"
              image-label="食物图片"
            />
          </view>
        </view>
      </view>

      <!-- 营养改善 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🥗</view>
          <text class="category-title">营养</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 营养摄入情况 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">营养摄入情况</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in nutritionIntake"
              :key="`nutrition-${index}`"
              :model-value="item"
              @update:model-value="(data) => updateNutritionIntake(index, data)"
              :show-title="true"
              title-label="营养素类型"
              title-placeholder="请输入营养素类型"
              description-label="摄入建议"
              description-placeholder="请输入具体的摄入建议"
              :description-rows="3"
              border-color="border-yellow-300"
              :show-images="true"
              image-label="营养图表"
            />
          </view>
        </view>
      </view>

      <!-- 运动改善 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🏃</view>
          <text class="category-title">运动</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 运动习惯 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">运动习惯</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in exerciseHabits"
              :key="`exercise-habit-${index}`"
              :model-value="item"
              @update:model-value="(data) => updateExerciseHabit(index, data)"
              :show-title="true"
              title-label="运动类型"
              title-placeholder="请输入运动类型"
              description-label="习惯养成建议"
              description-placeholder="请输入习惯养成建议"
              :description-rows="3"
              border-color="border-red-300"
              :show-images="true"
              image-label="运动图片"
            />
          </view>

          <!-- 运动频率 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">运动频率</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in exerciseFrequency"
              :key="`exercise-freq-${index}`"
              :model-value="item"
              @update:model-value="(data) => updateExerciseFrequency(index, data)"
              :show-title="true"
              title-label="频率类型"
              title-placeholder="请输入频率类型"
              description-label="频率建议"
              description-placeholder="请输入具体的频率建议"
              :description-rows="3"
              border-color="border-purple-300"
              :show-images="true"
              image-label="频率图表"
            />
          </view>

          <!-- 运动方式 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">运动方式</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in exerciseMethods"
              :key="`exercise-method-${index}`"
              :model-value="item"
              @update:model-value="(data) => updateExerciseMethod(index, data)"
              :show-title="true"
              title-label="运动方式"
              title-placeholder="请输入运动方式"
              description-label="方式说明"
              description-placeholder="请输入运动方式的具体说明"
              :description-rows="3"
              border-color="border-indigo-300"
              :show-images="true"
              image-label="运动方式图"
            />
          </view>
        </view>
      </view>

      <!-- 吸烟情况改善 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🚭</view>
          <text class="category-title">吸烟情况</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 烟嗜好 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">烟嗜好</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in smokingPreference"
              :key="`smoking-${index}`"
              :model-value="item"
              @update:model-value="(data) => updateSmokingPreference(index, data)"
              :show-title="true"
              title-label="吸烟类型"
              title-placeholder="请输入吸烟类型"
              description-label="戒除建议"
              description-placeholder="请输入戒除建议"
              :description-rows="3"
              border-color="border-gray-300"
              :show-images="true"
              image-label="戒除指导图"
            />
          </view>
        </view>
      </view>

      <!-- 饮酒情况改善 -->
      <view class="category-section">
        <view class="category-header">
          <view class="category-icon">🍷</view>
          <text class="category-title">饮酒情况</text>
        </view>
        
        <view class="subcategory-list">
          <!-- 酒嗜好 -->
          <view class="subcategory-item">
            <view class="subcategory-header">
              <text class="subcategory-title">酒嗜好</text>
            </view>
            <ItemWithImagesCard
              v-for="(item, index) in drinkingPreference"
              :key="`drinking-${index}`"
              :model-value="item"
              @update:model-value="(data) => updateDrinkingPreference(index, data)"
              :show-title="true"
              title-label="饮酒类型"
              title-placeholder="请输入饮酒类型"
              description-label="控制建议"
              description-placeholder="请输入饮酒控制建议"
              :description-rows="3"
              border-color="border-amber-300"
              :show-images="true"
              image-label="饮酒指导图"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/**
 * 生活方式与习惯改善计划组件
 * 根据层次化结构展示饮食、营养、运动、吸烟、饮酒等改善计划
 * @description 使用ItemWithImagesCard组件展示各个子节点的改善建议
 */

import { ref, reactive } from 'vue'
import ItemWithImagesCard from './ItemWithImagesCard.vue'

// 响应式数据
const dietHabits = ref([
  {
    title: '规律用餐',
    description: '建议每日三餐定时定量，避免暴饮暴食。早餐要丰富，午餐要均衡，晚餐要清淡。每餐间隔4-6小时，给肠胃充分的消化时间。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '细嚼慢咽',
    description: '每口食物咀嚼20-30次，有助于消化吸收，减少肠胃负担。细嚼慢咽还能增加饱腹感，有助于控制食量。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

const preferredFoods = ref([
  {
    title: '蔬菜水果',
    description: '每日至少摄入500g蔬菜和200g水果，选择深色蔬菜如菠菜、胡萝卜等，富含维生素和矿物质。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '全谷物',
    description: '选择全麦面包、燕麦、糙米等全谷物，富含膳食纤维，有助于维持血糖稳定和肠道健康。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

const nutritionIntake = ref([
  {
    title: '蛋白质',
    description: '每日摄入优质蛋白质，如鱼、瘦肉、豆类等，建议每公斤体重摄入1.2-1.5g蛋白质。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '维生素',
    description: '通过多样化饮食获取各种维生素，必要时可适当补充维生素D、B族维生素等。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

const exerciseHabits = ref([
  {
    title: '有氧运动',
    description: '每周进行3-5次有氧运动，如快走、慢跑、游泳等，每次30-60分钟，心率控制在最大心率的60-80%。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '力量训练',
    description: '每周进行2-3次力量训练，增强肌肉力量和骨密度，预防骨质疏松。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

const exerciseFrequency = ref([
  {
    title: '日常活动',
    description: '增加日常活动量，如走楼梯、步行上班、做家务等，每天至少6000步。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '运动计划',
    description: '制定合理的运动计划，循序渐进，避免过度运动造成损伤。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

const exerciseMethods = ref([
  {
    title: '户外运动',
    description: '多进行户外运动，享受阳光和新鲜空气，有助于身心健康。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '室内运动',
    description: '天气不好时可在室内进行运动，如瑜伽、健身操、器械训练等。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

const smokingPreference = ref([
  {
    title: '戒烟计划',
    description: '制定详细的戒烟计划，逐步减少吸烟量，寻求专业帮助和替代疗法。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '环境支持',
    description: '创造无烟环境，避免吸烟诱因，寻求家人朋友的支持和鼓励。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

const drinkingPreference = ref([
  {
    title: '适量饮酒',
    description: '男性每日饮酒不超过25g酒精，女性不超过15g。选择低度酒，避免空腹饮酒。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  },
  {
    title: '戒酒建议',
    description: '如有酒精依赖，建议寻求专业戒酒治疗，逐步减少饮酒量直至戒除。',
    images: ['http://www.dzgktf.com/templets/default/images/wtyt.jpg']
  }
])

// 更新方法
const updateDietHabit = (index: number, data: any) => {
  dietHabits.value[index] = data
}

const updatePreferredFood = (index: number, data: any) => {
  preferredFoods.value[index] = data
}

const updateNutritionIntake = (index: number, data: any) => {
  nutritionIntake.value[index] = data
}

const updateExerciseHabit = (index: number, data: any) => {
  exerciseHabits.value[index] = data
}

const updateExerciseFrequency = (index: number, data: any) => {
  exerciseFrequency.value[index] = data
}

const updateExerciseMethod = (index: number, data: any) => {
  exerciseMethods.value[index] = data
}

const updateSmokingPreference = (index: number, data: any) => {
  smokingPreference.value[index] = data
}

const updateDrinkingPreference = (index: number, data: any) => {
  drinkingPreference.value[index] = data
}
</script>

<style lang="scss" scoped>
.lifestyle-improvement-plan {
  width: 100%;
  padding: 32rpx 24rpx;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  box-sizing: border-box;
}

// 标题区域
.plan-header {
  width: 100%;
  margin-bottom: 48rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  box-sizing: border-box;
  
  .header-content {
    flex: 1;
    
    .title-text {
      display: block;
      font-size: 52rpx;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8rpx;
      line-height: 1.2;
    }
    
    .subtitle-text {
      font-size: 26rpx;
      color: #64748b;
      font-weight: 400;
      line-height: 1.4;
    }
  }
  
  .header-decoration {
    display: flex;
    flex-direction: column;
    gap: 8rpx;
    
    .decoration-circle {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      
      &:last-child {
        background: linear-gradient(135deg, #8b5cf6, #ec4899);
      }
    }
  }
}

.plan-content {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.category-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f1f5f9;
  
  .category-icon {
    font-size: 48rpx;
    margin-right: 20rpx;
  }
  
  .category-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #1e293b;
  }
}

.subcategory-list {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.subcategory-item {
  .subcategory-header {
    margin-bottom: 20rpx;
    
    .subcategory-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #475569;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 24rpx;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        border-radius: 4rpx;
      }
    }
  }
}

</style>
